<template>
  <view class="wrapper">
    <view class="container">
      <VueEcharts :option="options" />
    </view>
  </view>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import VueEcharts from 'vue-echarts';

// 初始进度值
const props = defineProps({
  data: Object,
});
const options = ref(null);
onMounted(() => {
  upData();
});
const upData = () => {
  options.value = {
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
    },
    legend: {
      show: false,
    },
    grid: {
      left: '10%',
      right: '0%',
      bottom: '10%',
      top: '10%',
    },
    xAxis: [
      {
        type: 'category',
        data: ['过敏史', '抑郁', '哮喘', '其他'],
        nameTextStyle: {
          color: '#6E7B8B',
        },
        axisLine: {
          show: true, // 是否显示轴线
          lineStyle: {
            color: '#6E7B8B', // 轴线颜色
            width: 1, // 轴线宽度
          },
        },
        axisTick: {
          lineStyle: {
            color: '#6E7B8B',
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        nameTextStyle: {
          color: '#6E7B8B',
        },
      },
    ],
    series: [
      {
        name: 'Email',
        type: 'bar',
        data: [120, 132, 101, 134, 90, 230, 210],
        barMaxWidth: 20,
        itemStyle: {
          normal: {
            barBorderRadius: [5, 5, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#A5E0F2',
              },
              {
                offset: 1,
                color: '#29B9E6',
              },
            ]),
          },
        },
      },
    ],
  };
};
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		box-sizing: border-box;
		padding: 0 50rpx;
		height: 400rpx;
	}
	.container{
		width: 100%;
		height: 100%;
	}
</style>
